/**
 * React应用主入口文件 (React Application Main Entry)
 * 
 * 功能说明：
 * - 渲染React应用到DOM
 * - 配置React Router路由管理
 * - 配置全局状态管理 (React Query)
 * - 设置Ant Design UI框架配置
 * - 配置国际化语言支持
 * - 提供全局错误处理
 * - 实现应用启动流程
 * 
 * 技术架构：
 * - React 18 - 前端框架
 * - React Router 6 - 路由管理
 * - React Query 3 - 服务端状态管理
 * - Ant Design 5 - UI组件库
 * - Day.js - 日期处理库
 * - Zustand - 客户端状态管理
 * 
 * 安全特性：
 * - 错误边界处理
 * - 全局错误捕获
 * - 认证状态检查
 * - 安全的应用启动流程
 * 
 * 性能优化：
 * - 懒加载组件
 * - 代码分割
 * - 缓存策略
 * - 错误恢复机制
 */

import React from 'react'
import ReactDOM from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import { QueryClient, QueryClientProvider } from 'react-query'
import { ConfigProvider, message } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'

// 导入应用主组件
import App from './App.jsx'

// 导入全局样式
import './styles/index.css'

// 配置dayjs中文语言包
dayjs.locale('zh-cn')

/**
 * 配置React Query客户端
 * 
 * React Query用于：
 * - 服务端状态管理
 * - 数据缓存和同步
 * - 请求去重和优化
 * - 后台数据更新
 * - 错误处理和重试
 * - 加载状态管理
 * 
 * 配置说明：
 * - retry: 请求失败重试次数
 * - retryDelay: 重试延迟时间（毫秒）
 * - staleTime: 数据过期时间（5分钟）
 * - cacheTime: 缓存保留时间（10分钟）
 * - refetchOnWindowFocus: 窗口聚焦时是否重新请求
 */
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 3,              // 请求失败重试次数
      retryDelay: 1000,      // 重试延迟时间（毫秒）
      staleTime: 5 * 60 * 1000,  // 数据过期时间 (5分钟)
      cacheTime: 10 * 60 * 1000, // 缓存时间 (10分钟)
      refetchOnWindowFocus: false, // 窗口聚焦时不重新请求
      onError: (error) => {
        // 全局查询错误处理
        console.error('Query error:', error)
        if (error.response?.status === 401) {
          // 处理认证失败
          message.error('登录已过期，请重新登录')
          // 可以在这里添加跳转到登录页的逻辑
        }
      }
    },
    mutations: {
      onError: (error) => {
        // 全局mutation错误处理
        console.error('Mutation error:', error)
        message.error(error.response?.data?.message || '操作失败，请稍后重试')
      }
    }
  }
})

/**
 * Ant Design全局配置
 * 
 * 配置内容：
 * - 国际化语言包
 * - 主题定制
 * - 消息提示配置
 * - 组件默认样式
 */
const antdConfig = {
  locale: zhCN,  // 中文语言包
  theme: {
    token: {
      colorPrimary: '#1890ff',    // 主色调（蓝色）
      borderRadius: 6,            // 圆角大小
      fontSize: 14                // 基础字体大小
    }
  },
  message: {
    maxCount: 3,        // 最大消息提示数量
    duration: 3,        // 消息显示时长（秒）
    top: 24            // 距离顶部距离
  }
}

/**
 * 应用根组件 (Application Root Component)
 * 
 * 功能：
 * - 包装所有的全局Provider
 * - 提供应用级别的配置
 * - 管理全局状态和路由
 * 
 * Provider层次结构：
 * - QueryClientProvider: React Query状态管理
 * - BrowserRouter: 路由管理
 * - ConfigProvider: Ant Design配置
 * - App: 主应用组件
 */
function AppRoot() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter future={{ v7_startTransition: true, v7_relativeSplatPath: true }}>
        <ConfigProvider {...antdConfig}>
          <App />
        </ConfigProvider>
      </BrowserRouter>
    </QueryClientProvider>
  )
}

/**
 * 应用启动函数 (Application Startup Function)
 * 
 * 功能：
 * - 移除HTML中的加载动画
 * - 渲染React应用到DOM
 * - 错误边界处理和恢复
 * - 应用状态初始化
 * 
 * 启动流程：
 * 1. 移除加载动画
 * 2. 获取根DOM元素
 * 3. 创建React根实例
 * 4. 渲染应用组件
 * 5. 错误处理和恢复
 */
function startApp() {
  try {
    // 移除HTML中的加载动画
    const loadingElement = document.querySelector('.loading-container')
    if (loadingElement) {
      loadingElement.remove()
    }

    // 获取根元素并渲染React应用
    const rootElement = document.getElementById('root')
    if (!rootElement) {
      throw new Error('Root element not found')
    }

    // 创建React 18根实例
    const root = ReactDOM.createRoot(rootElement)
    
    // 渲染应用（使用严格模式）
    root.render(
      <React.StrictMode>
        <AppRoot />
      </React.StrictMode>
    )

    console.log('🚀 二手交易平台启动成功!')
  } catch (error) {
    console.error('❌ 应用启动失败:', error)
    
    // 显示用户友好的错误页面
    document.body.innerHTML = `
      <div style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        font-family: Arial, sans-serif;
        text-align: center;
        background: #f5f5f5;
      ">
        <div>
          <h2 style="color: #ff4d4f; margin-bottom: 16px;">应用启动失败</h2>
          <p style="color: #666; margin-bottom: 16px;">请刷新页面重试，或联系技术支持</p>
          <button 
            onclick="window.location.reload()" 
            style="
              padding: 8px 16px;
              background: #1890ff;
              color: white;
              border: none;
              border-radius: 4px;
              cursor: pointer;
            "
          >
            刷新页面
          </button>
        </div>
      </div>
    `
  }
}

// 启动应用
startApp() 